<template>
	<view class="swiper-container" :id="id">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view
			class="swiper-box"
			:class="{ animation: !allow }"
			@touchstart="touchStart"
			@touchmove.prevent="touchMove"
			@touchend="touchEnd"
			:style="{
				transform: `translateX(${position}rpx)`
			}"
		>
			<view class="swiper-item" v-for="(item, index) in dirayList" :key="index">
				<view :style="{ width: baseWidth + 'rpx' }" @click.native="handlerClick(item, index)">
					<image class="swiper-item-image" :src="item[fields.imageUrlField]" mode="aspectFill" :style="{ height: imageHeight + 'rpx' }" />
					<view style="position: absolute;top: 0;right: 0;width: 58rpx;height: 58rpx;" @click.stop="goThumbs(item)">
						<view class="img-border">
							<image :src="item.isNoThumbs === 1 ? thumbsImgYellow : thumbsImgHeart" mode="aspectFit"></image>
						</view>
					</view>
					<view class="swiper-item-content">
						<view class="swiper-item-content_title">{{ item[fields.titleField] }}</view>
						<slot name="subTitle" :scope="item">
							<view class="swiper-item-content_sub-title" v-if="item[fields.subTitleField]">{{ item[fields.subTitleField] }}</view>
							<view class="swiper-item-content_sub-title">{{ item[fields.dateTimeField] }}</view>
						</slot>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import http from '../../common/request.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
export default {
	props: {
		baseWidth: {
			type: Number,
			default: 256
		},
		imageHeight: {
			type: Number,
			default: 208
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		left: { type: Number, default: 40 },
		right: { type: Number, default: 40 }
	},
	watch: {
		list: {
			handler(list) {
				this.dirayList = list;
			},
			deep: true,
			immediate: true
		},
		keys: {
			handler(val) {
				Object.assign(this.fields, val);
			},
			immediate: true
		},
		left: {
			handler(val) {
				this.position = val;
			},
			immediate: true
		}
	},
	components: {
		popupActive
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			popScreenList: [],
			showHonor: false,
			dirayList: [],
			id: 'swiper_' + this.getUUID(8),
			width: 0,
			maxWidth: 0,
			ratio: 750 / info.windowWidth,
			fields: { imageUrlField: '', titleField: '', subTitleField: '', dateTimeField: '' },
			allow: false,
			position: 0,
			likeType: 0, //点赞/取消点赞，状态
			optionsData: {},
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png'
		};
	},
	mounted() {
		// this.getBeautifulDiaryList()
		const info = uni.getSystemInfoSync();
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#' + this.id)
			.boundingClientRect(data => {
				this.width = data.width * this.ratio;
			})
			.exec();
	},
	methods: {
		// getBeautifulDiaryList() {
		// 	http('/api/cusBeautifulDiary/pageListSort', { method: 'POST', data: { pageNum: '1', pageSize: 3 } }).then(result => {
		// 		const list = result.rows || [];
		// 		for (let item of list) {
		// 			item.publishTime = item.createTime.split(' ')[0];
		// 		}
		// 		this.dirayList = list;
		// 	});
		// },
		goThumbs(item) {
			// isNoThumbs   1 点赞     2取消点赞
			let url = '';
			if (item.isNoThumbs == 1) {
				url = '/api/cusBeautifulDiary/dataDecr';
				item.isNoThumbs = 2;
				this.likeType = 2;
			} else {
				url = '/api/cusBeautifulDiary/dataIncr';
				item.isNoThumbs = 1;
				this.likeType = 1;
			}
			this.optionsData = {
				contentId: item.cusDiaryId,
				likeType: this.likeType,
				diaryType: '2'
			};
			http(url, { method: 'POST', data: this.optionsData }).then(result => {
				const list = result.popScreen || [];
				if (list.length > 0) {
					this.showHonor = true;
					this.popScreenList = list;
				}
				this.$emit('careSuccess');
			});
		},
		getUUID(len, radix) {
			var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			var uuid = [],
				i;
			radix = radix || chars.length;
			if (len) {
				for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
			} else {
				var r;
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
				for (i = 0; i < 36; i++) {
					if (!uuid[i]) {
						r = 0 | (Math.random() * 16);
						uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
					}
				}
			}
			return uuid.join('');
		},
		handlerClick(item, index) {
			this.$emit('itemClick', item, index);
		},
		calcMaxWidth() {
			const len = this.list.length;
			return len * this.baseWidth + (len - 1) * 24;
		},
		touchStart(e) {
			this.allow = true;
			this.start = e.touches[0].pageX * this.ratio;
			this.end = this.start;
			this.last = this.position;
		},
		touchMove(e) {
			if (this.allow) {
				this.end = e.touches[0].pageX * this.ratio;
				this.position = this.last + this.end - this.start;
			}
		},
		touchEnd(e) {
			const maxWidth = this.calcMaxWidth();
			const moveLest = (this.end - this.start) % this.baseWidth;
			const ratio = this.baseWidth / 2 / moveLest;

			if (0 > ratio && ratio > -1) {
				this.position -= this.baseWidth + moveLest;
				if (Math.abs(this.position) < 2 * this.baseWidth) {
					this.position -= this.left;
				}
			} else if (ratio < -1) {
				this.position -= moveLest;
			} else if (ratio > 0 && ratio < 1) {
				this.position += this.baseWidth - moveLest;
			} else {
				this.position -= moveLest;
			}

			if (this.position > this.left || this.position === 0) {
				this.position = this.left;
			} else if (this.position <= this.width - maxWidth - this.right) {
				this.position = this.width - maxWidth - this.right;
			}
			this.start = 0;
			this.end = 0;
			this.allow = false;
		}
	}
};
</script>
<style scoped lang="less">
.img-border {
	position: absolute;
	z-index: 2;
	top: 8rpx;
	right: 8rpx;
	// background: rgba(0, 0, 0, 1);
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	padding: 8rpx;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	image {
		width: 26rpx;
		height: 26rpx;
		background: transparent;
		vertical-align: top;
		// background-position : -100 -100;
	}
}
.swiper-container {
	width: 750rpx;
	overflow: hidden;
	.swiper-box {
		position: relative;
		display: flex;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		&.animation {
			transition: all 0.2s;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-right: 24rpx;
			flex-shrink: 0;
			background: #fff;
			box-shadow: 0 2rpx 20rpx 0 rgba(102, 100, 93, 0.1);
			margin-bottom: 32rpx;
			border-radius: 12rpx;
			position: relative;
			.swiper-item-image {
				width: 100%;
				height: 176rpx;
				border-radius: 12rpx 12rpx 0 0;
				animation: to-big 0.5s;
				vertical-align: top;
			}

			.swiper-item-content {
				padding: 24rpx;
				text-align: left;
				width: 100%;
				.swiper-item-content_title {
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(102, 100, 93, 1);
					line-height: 36rpx;
					height: 72rpx;
					margin-bottom: 38rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.swiper-item-content_sub-title {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(138, 140, 141, 0.5);
					line-height: 33rpx;
				}
			}
		}
	}
}
</style>
